<template>
	<div class="">
		<div class="author mb20 common-single">
			<a href="https://www.rxjyzs.com/sjs/detail/02701563.html" target="_blank">
				<img class="photo"
					src="https://cdnpt.itchzz.com/rxpt/Images/16637659721r0YSbxmsKQPEywFa2e8er37.JPG?x-oss-process=image/quality,q_80"
					alt="">
			</a>
			<h4>
				<span>
					徐佩
				</span>
			</h4>
			<p class="be-good">
				专营：
				#办公
				#商业
				#餐饮
				<br>擅长：
				#现代简约
				#轻奢
				#工业风格
			</p>
			<ul class="clearfix">
				<li>
					<p class="p1"><strong>1807</strong></p>
					<p class="p2">人气</p>
				</li>
				<li>
					<p class="p1"><strong>12</strong></p>
					<p class="p2">作品</p>
				</li>
				<li>
					<p class="p1">
						<strong class="appoint-designer-num">3</strong>
					</p>
					<p class="p2">预约</p>
				</li>
			</ul>
			<div class="buttons">
				<a @click="jump('designerDetail')" class="comm-button button-white ml5">查看主页</a>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter

	const router = useRouter(); // 获取路由实例
	const jump = (path) => {
		router.push({
			name: path
		}); // 使用 router 实例进行跳转
	}
</script>

<style scoped lang="less">
	.common-single {
		background-color: #f4f5f7;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;

		.photo {
			display: block;
			width: 110px;
			height: 110px;
			background-color: #cccccc;
			border: solid 3px #ffffff;
			border-radius: 50%;
		}

		h4 {
			font-size: 22px;
			color: #222222;
			line-height: 22px;
		}

		.buttons {
			text-align: center;
		}
	}

	.author {
		padding: 32px 0;

		.photo {
			margin: 0 auto 15px;
		}

		h4 {
			text-align: center;
			margin-bottom: 20px;
		}

		.be-good {
			line-height: 22px;
			color: #696969;
			text-align: center;
			margin-bottom: 40px;
			font-size: 14px;
		}

		ul {
			margin-bottom: 25px;

			li:first-child {
				border-left: none;
			}

			li {
				float: left;
				width: 33.333%;
				text-align: center;
				border-left: 1px solid #e4e4e4;
				line-height: 22px;

				.p1 {
					font-size: 18px;
					color: #222222;

					strong {
						font-weight: 400;
					}
				}

				.p2 {
					color: #868686;
				}
			}
		}
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.ml5 {
		margin-left: 5px;
	}

	.clearfix {
		zoom: 1;
	}

	.clearfix:after {
		display: block;
		content: "";
		clear: both;
	}

	.button-white {
		border: 1px solid #696969;
		background-color: #fff;
		color: #333333;
	}

	.button-white:hover {
		border-color: #da1a45;
	}

	.button-white:hover::before {
		background: #da1a45;
	}

	.comm-button {
		position: relative;
		display: inline-block;
		min-width: 100px;
		height: 34px;
		line-height: 32px;
		border-radius: 17px;
		z-index: 5;
		text-align: center;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}

	.comm-button::before {
		position: absolute;
		content: "";
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		transition: all 0.4s ease;
		transform: scaleX(0);
		border-radius: 17px;
	}

	.comm-button:hover {
		color: #fff;
	}

	.comm-button:hover::before {
		transform: scaleX(1);
	}
</style>